<template>
	<view class='shop-list'> 
		<view class='shop-title f-color'>
<<<<<<< HEAD
			<view class='shop-item' v-for="(item,index) in shopList.data" :key='index' @tap='changTab(index)'>
=======
			<view class='shop-item'
				v-for="(item,index) in shopList.data"
				:key='index'
				@tap='changTab(index)'
			>
>>>>>>> 3805ca697129940e60b69c3c699dd043acec9e14
				<view :class="  shopList.currentIndex==index ?'f-active-color':'' ">{{item.name}}</view>
				<view class='shop-icon'>
					<view class='iconfont icon-shangjiantou up' :class=' item.status ===1 ? "f-active-color":"" '>
					</view>
					<view class='iconfont icon-xiajiantou down' :class=' item.status ===2 ? "f-active-color":"" '>
					</view>
				</view>
			</view>
		</view>
		<Lines />
		<CommodityList :dataList='dataList'></CommodityList>
	</view>
</template>

<script>
<<<<<<< HEAD
	import Lines from '@/components/common/Lines.vue'
	import CommodityList from './SearchCommodityList.vue'
	export default {
		props: {
			keyword: String
=======
import Lines from '@/components/common/Lines.vue'
import CommodityList from './CommodityList.vue'
export default {
		props:{
			keyword:String
>>>>>>> 3805ca697129940e60b69c3c699dd043acec9e14
		},
		data () {
			return {
				shopList: {
					currentIndex: 0,
					data: [
						{ name: "价格", status: 1, key: "pprice" },
						{ name: "折扣", status: 0, key: "discount" },
						{ name: "品牌", status: 0 }
					]
				},
				dataList: []
			}
		},
		computed: {
			orderBy () {
				//拿到当前对象
				let obj = this.shopList.data[ this.shopList.currentIndex ];
				let val = obj.status === "1" ? "asc" : "desc";
				return {
					[ obj.key ]: val
				}

			}
		},
		components: {
			Lines,
			CommodityList
		},
		mounted () {
			this.getData();
		},
		methods: {
			//请求数据数据
<<<<<<< HEAD
			getData () {

				var key = this.keyword
				console.log( "gougou!!!" + key )
				uni.request( {
					url: "http://127.0.0.1:4523/m1/598450-0-default/product/query/search/1/6?key=" + key,
					data: {},

					success: ( res ) => {
						this.dataList = res.data.data.records
						// console.log("商品数据：" + JSON.stringify(res.data.data.records))
					},
				} )
			},
			changTab ( index ) {
=======
			getData(){
				
				var key = this.keyword
				console.log("gougou!!!" + key)
				uni.request({
					url:"http://127.0.0.1:4523/m1/598450-0-default/product/query/search/1/6?key=" + key,
					data:{},
					
					success:(res)=>{
						this.dataList = res.data.data.records
						// console.log("商品数据：" + JSON.stringify(res.data.data.records))
					},
				})
			},
			changTab(index){
>>>>>>> 3805ca697129940e60b69c3c699dd043acec9e14
				//点击排序，重新请求了数据
				this.getData();
				//索引值
				let idx = this.shopList.currentIndex;
				//具体哪一个对象（价格、折扣、品牌）
<<<<<<< HEAD
				let item = this.shopList.data[ idx ];
				if ( idx == index ) {
					//选中标签相同，则转换上下箭头的显示
					return item.status = item.status === 1 ? 2 : 1;
				}
				//新的标签赋值
				let newItem = this.shopList.data[ index ];
=======
				let item = this.shopList.data[idx];
				if( idx == index ){
					//选中标签相同，则转换上下箭头的显示
					return item.status = item.status === 1 ? 2:1;
				}
				//新的标签赋值
				let newItem = this.shopList.data[index];
>>>>>>> 3805ca697129940e60b69c3c699dd043acec9e14
				item.status = 0;
				//（价格、折扣、品牌）给选中的标签
				this.shopList.currentIndex = index;
				newItem.status = 1;

			}
		},
<<<<<<< HEAD
		onLoad () {
			console.log( "已经进入ShopList！！！" )
=======
		onLoad() {
			console.log("已经进入ShopList！！！")
>>>>>>> 3805ca697129940e60b69c3c699dd043acec9e14
		}
	}

</script>

<style scoped>
	.shop-title {
		display: flex;
	}

	.shop-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
	}

	.shop-icon {
		position: relative;
		margin-lef: 10rpx;
	}

	.iconfont {
		width: 16rpx;
		height: 8rpx;
		position: absolute;
		left: 0;
	}

	.up {
		top: -34rpx;
	}

	.down {
		top: -24rpx;
	}

</style>
